<template>
    <div class="board-column">
        <div class="board-column-header" :style="{background: headerBackground}">
            {{ headerText }}
        </div>
        <draggable
            :list="list"
            tag="div"
            :style="{height: listHeight}"
            :options="options"
            @end="handleMoveEnd"
            @start="handleMoveStart"
            :move="handleMove"
            :id="headerText"
            v-infinite-scroll="load"
            :infinite-scroll-distance="50"
            class="board-column-content">
            <div v-for="(card,index) in list" :key="index" style="width:100%;">
                <el-card shadow="hover">
                    <div :style="{height: card.jsonObj.config.height,padding: '6px'}">
                        <fm-generate-form
                            :data="card.jsonObj"
                            :remote="remoteFuncs"
                            :value="editData"
                            ref="generateForm"
                        />
                    </div>
                </el-card>
            </div>
        </draggable>
    </div>
</template>
<script>
import draggable from 'vuedraggable'

export default {
    name: 'DragKanbanDemo',
    components: {
        draggable
    },
    props: {
        headerText: {
            type: String,
            default: 'Header'
        },
        headerId: {
            type: String,
            default: '1'
        },
        options: {
            type: Object,
            default() {
                return {}
            }
        },
        list: {
            type: Array,
            default() {
                return []
            }
        },
        listHeight: {
            type: String,
            default: '500px'
        },
        headerBackground: {
            type: String,
            default: '#4a9ff9'
        }
    },
    data() {
        return {
            editData: {},
            remoteFuncs: {},
            draggedpk: -1
        }
    },
    methods: {
        handleMoveEnd(evt) {
            console.log(evt)
            if (evt.from.id === evt.to.id) {
                return
            }
            this.$emit('sendChangeItem', {
                oldValue: evt.from.id,
                newValue: evt.to.id,
                pkValue: this.draggedpk
            })
        },
        handleMoveStart({ oldIndex }) {
            console.log('start', oldIndex, this.list, this.headerId)
        },
        handleMove(evt) {
            console.log(evt.draggedContext)
            this.draggedpk = evt.draggedContext.element.PKvalue
            // 这里evt.draggedContext后续的内容根据具体的定义变量而定
        },
        load() {
            console.log('ssssssssssss')
            this.$emit('loadMore', {
                id: this.headerId,
                headerText: this.headerText
            })
        }
    }
}
</script>

